<template>
    <div class="check-order-page">
        <img src="../../../assets/images/header1.jpeg" class="top-img"
             id="topimg"/>
        <div class="area">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">证件号：</span>
                    <input slot="right" v-model="idcard" type="text" placeholder="请输入证件号">
                </yd-cell-item>
            </yd-cell-group>
            <div class="idcar-btn">
                <yd-button size="large" type="warning" @click.native="idCardCheck">证件核验</yd-button>
            </div>
            <yd-button size="large" type="primary" @click.native="openQr">扫码核验</yd-button>
        </div>
        <div class="check-log" @click="goCheckPage">核验记录</div>
        <div class="check-log" @click="goToShopTotal">店铺总记录</div>
        <div class="wl-shop-name">{{ shopName }}</div>
        <div class="wl-shop-name"><span>总订单：{{ totalNum }}</span><span>核销订单:{{ overNum }}</span></div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { checkOrder, isBindShopUser, getOrderInfo } from '@/api/kouzhao'

export default {
  data () {
    return {
      idcard: '',
      shopName: '',
      totalNum: 0,
      overNum: 0
    }
  },
  mounted () {
    isBindShopUser().then(ret => {
      if (ret.data.errcode === 1002) {
        this.$router.push({
          name: 'bingUser'
        })
      } else if (ret.data.errcode === 1001) {
        this.shopName = ret.data.data.user.shop_name
        this.totalNum = ret.data.data.all
        this.overNum = ret.data.data.used
      }
    })
  },
  methods: {
    openQr () {
      let _this = this
      this.$common.wxCallBack(() => {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            let result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
            _this.checkOrder(result)
          }
        })
      })
    },
    idCardCheck () {
      if (this.idcard) {
        checkOrder({ idcard: this.idcard }).then(ret => {
          let result = ret.data
          if (result.errcode === 1001) {
            this.$dialog.toast({ mes: '核验成功' })
          } else {
            this.$dialog.toast({ mes: result.errmsg, timeout: 3000 })
          }
        })
      } else {
        this.$dialog.toast({ mes: '请输入证件号！' })
      }
    },
    checkOrder (code) {
      let _this = this
      getOrderInfo(code).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$dialog.confirm({
            title: '对方证件号/点击确定核销',
            mes: ret.data.data.people_cardno,
            opts: () => {
              _this.xiaoOrder(code)
            }
          })
        } else {
          this.$dialog.toast({ mes: '获取信息失败' })
        }
      })
    },
    xiaoOrder (code) {
      checkOrder({ code: code }).then(ret => {
        let result = ret.data
        if (result.errcode === 1001) {
          this.$dialog.toast({ mes: '核验成功' })
        } else {
          this.$dialog.toast({ mes: result.errmsg, timeout: 3000 })
        }
      })
    },
    goCheckPage () {
      this.$router.push({ name: 'checkLog' })
    },
    goToShopTotal () {
      this.$router.push({ name: 'shopOrderAllList' })
    }
  }
}
</script>

<style scoped>
    .check-order-page {
        width: 100%;
    }

    .top-img {
        width: 100%;
    }

    .area {
        padding: .2rem;
    }

    .idcar-btn {
        display: flex;
        justify-content: center;
    }

    .check-log {
        display: flex;
        justify-content: flex-end;
        color: #0bb20c;
        cursor: pointer;
        margin-right: .2rem;
        font-size: .3rem;
    }

    .wl-shop-name {
        text-align: center;
        margin-top: 1.2rem;
        font-size: .4rem;
        color: #5f9ea0;
    }
</style>
